<template>
  <div id="home">
    <div>
      <vindex></vindex>
    </div>
    <div class="homeCenter">
      <ul>
        <li v-for="item in film">
          <router-link :to="'/movie/'+item.id">
            <div class="home_left">
              <img v-lazy="item.img">
              <div class="homeInfo">
                <h3>{{item.nm}}</h3>
                <h4>{{item.scm}}</h4>
                <h5>{{item.showInfo}}</h5>
              </div>
            </div>
            <div class="homeGrade ">
              <p>
                <span>{{item.sc==0?item.wish:item.sc}}</span>{{item.sc==0?'人想看':'分'}}</p>
              <router-link to="/cinemaList" :name="item.sc==0">
                {{item.sc == 0 ? '预售' : '购票'}}
              </router-link>
            </div>
          </router-link>
        </li>
      </ul>
      <div class="load">
        <a href="javascript:" class="loadMore" v-on:click="loadMore()">加载更多</a>
      </div>
    </div>
  </div>
</template>

<script>
import filmer from '../filmer'
import $ from 'jquery'
import Vue from 'vue'
import VueLazyload from 'vue-lazyload'
import vindex from '../layouts/index.vue'
//图片懒加载
Vue.use(VueLazyload, {
  loading: "/lib/images/lazyload.gif"
})

export default {
  components: {
    vindex
  },
  data: function() {
    return {
      film: [],
      hot_offset: 0,
      coming_offset: 0,
      offset: 0
    }
  },
  methods: {
    init: function() {
      this.offset = 0;
      this.appendData('hot', 1000);
      this.offset = 0;
    },
    appendData: function(type, limit) {
      var that = this;
      type = type || 'hot';
      limit = limit || 10;
      switch (type) {
        case 'hot':
          this.offset = this.hot_offset;
          break;
        case 'coming':
          this.offset = this.coming_offset;
          break;
      }
      filmer.getFilmList(type, this.offset, limit, function(data) {
        if (data.status == 0) {
          that.film = that.film.concat(data.data.movies);
          // console.log(this.film)
          switch (type) {
            case 'hot':
              that.hot_offset += limit;
              break;
            case 'coming':
              that.coming_offset += limit;
              break;
          }
        }
      })
    },
    loadMore: function() {
      this.appendData("coming", 10)
    },

    // getData: function (type, offset, limit, success) {
    //   $.ajax({
    //     url: 'http://127.0.0.1:8090/https://m.maoyan.com/movie/list.json',
    //     type: 'get',
    //     dataType: 'json',
    //     data: {
    //       type: type,
    //       offset: offset,
    //       limit: limit
    //     },
    //     success(r) {
    //       console.log(r)
    //     }
    //   })
    // }

  },
  created: function() {
    this.init()
  }
}
</script>

<style scoped>
#home>.homeCenter {
  top: 227%;
  position: absolute;
  width: 100%;
}

#home>.homeCenter>ul>li {
  padding: 1rem;
  border-bottom: 1px solid #ddd;
  padding: 7px 11px 29% 11px;
}

#home>.homeCenter a>.home_left {
  display: -webkit-box;
  float: left;
  /* width: 100%; */
}

#home>.homeCenter a>.home_left img {
  width: 6.1rem;
  height: 8.4rem;
  margin-right: 1rem;
}

#home>.homeCenter a>.home_left>.homeInfo>h3 {
  font-size: 1.6rem;
  color: #000;
  margin: 0px;
}

#home>.homeCenter a>.home_left>.homeInfo>h4 {
  font-size: 1.4rem;
  color: #666;
}

#home>.homeCenter a>.home_left>.homeInfo>h5 {
  font-size: 1.2rem;
  color: #666;
}


#home>.homeCenter a>.homeGrade {
  float: right;
}

#home>.homeCenter a>.homeGrade>p {
  color: #ff9a00;
  font-size: 1.6rem;
  text-align: center;
}

#home>.homeCenter a>.homeGrade>a {
  color: #fff;
  background-color: #e54247;
  float: right;
  padding: .7rem;
  position: relative;
  top: 1.6rem;
  font-size: 1.5rem;
  border-radius: 3px;
}

#home>.homeCenter .homeGrade a[name=true] {
  background-color: #52B0EB;
}


#home>.homeCenter .load {
  border-bottom: 1px solid #ddd;
}

#home>.homeCenter .load a {
  text-align: center;
  display: block;
  color: tomato;
  padding: 2rem 0;
  font-size: 1.6rem;
}
</style>

